import React, { Component } from 'react';
import { Link } from 'react-router-dom';

// require('./../mock')

class Com extends Component {
  constructor(props) {
    super(props);
    this.state={
      fname:''
    }
  }
  componentDidMount () {
    let fname = JSON.parse(localStorage.getItem('f_name'))
    this.setState({
      fname:fname
    })
  }
  vug1 () {
    let vugtList = this.refs.qz.innerHTML
    localStorage.setItem('f_name', JSON.stringify(vugtList))
    this.props.history.go()
  }
  vug2 () {
    let vugtList = this.refs.fq.innerHTML
    localStorage.setItem('f_name', JSON.stringify(vugtList))
    this.props.history.go()
  }
  vug3 () {
    let vugtList = this.refs.td.innerHTML
    localStorage.setItem('f_name', JSON.stringify(vugtList))
    this.props.history.go()
  }
  vug4 () {
    let vugtList = this.refs.lb.innerHTML
    localStorage.setItem('f_name', JSON.stringify(vugtList))
    this.props.history.go()
  }
  vug5 () {
    let vugtList = this.refs.xg.innerHTML
    localStorage.setItem('f_name', JSON.stringify(vugtList))
    this.props.history.go()
  }
  vug6 () {
    let vugtList = this.refs.xbg.innerHTML
    localStorage.setItem('f_name', JSON.stringify(vugtList))
    this.props.history.go()
  }
  vug7 () {
    let vugtList = this.refs.jc.innerHTML
    localStorage.setItem('f_name', JSON.stringify(vugtList))
    this.props.history.go()
  }
  vug8 () {
    let vugtList = this.refs.bc.innerHTML
    localStorage.setItem('f_name', JSON.stringify(vugtList))
    this.props.history.go()
  }

  render() {
    return (
      <div>
          <div className="Kind_Choice">
            <span><Link to={{pathname:"/home"}}>首页</Link></span><p>></p><span><Link to={{pathname:"/kind"}}>全部分类</Link></span><p>></p><h3>{this.state.fname}</h3>
          </div> 
          <div className="Kind_nav"> 
          {/* 左上 选择 */}
          <ul className="meatAndveg">
            <li>
              果实类蔬菜
              <ul>
                <li onClick={ this.vug1.bind(this) } ref="qz">茄子</li>
                <li onClick={ this.vug2.bind(this) } ref="fq">番茄</li>
              </ul>
            </li>
            <li>
               根茎类数蔬菜
              <ul>
                <li onClick={ this.vug3.bind(this) } ref="td">土豆</li>
                <li onClick={ this.vug4.bind(this) } ref="lb">萝卜</li>
              </ul>
            </li>
            <li>
               菌菇类
              <ul>
                <li onClick={ this.vug5.bind(this) } ref="xg">香菇</li>
                <li onClick={ this.vug6.bind(this) } ref="xbg">杏鲍菇</li>
              </ul>
            </li>
            <li>
              叶类蔬菜
              <ul>
                <li onClick={ this.vug7.bind(this) } ref="jc">韭菜</li>
                <li onClick={ this.vug8.bind(this) } ref="bc">菠菜</li>
              </ul>
            </li>
          </ul>
        </div>
    </div>
    )
  }
}

export default Com;